import React, { useState } from "react";
import { MyNavBar } from "../../../components";
import style from "./style.module.scss";
import { useNavigate } from "react-router-dom";
import { checkCode, sendOutEmailCode } from "../../../api/my";

const Index: React.FC = () => {
  const navigate = useNavigate();
  const [email, setEmail] = useState<string>("");
  const [code, setCode] = useState<string>("");
  const onkeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.keyCode === 13) {
      nextStep();
      console.log("成功");
    }
  };

  const getCode = async (e) => {
    e.preventDefault();
    await sendOutEmailCode(email);
  };

  const nextStep = async () => {
    const resp = await checkCode(email, code);
    const { status } = resp;
    if (status === "0000") {
      navigate("/my/forget/password2?email=" + email);
    }
  };
  return (
    <div className={style.forgetPassword}>
      <div className="navbar">
        <MyNavBar
          title="忘记密码"
          leftArrow
          theme="white"
          onClickLeft={() => navigate("/login")}
        ></MyNavBar>
      </div>
      <form className={style.content}>
        <div className={style.formItem_email}>
          <input
            type="text"
            className={style.emailInp}
            placeholder="请输入邮箱"
            name="email"
            value={email}
            onChange={(e) => {
              setEmail(e.target.value);
            }}
          />
          <button className={style.btn_code} onClick={(e) => getCode(e)}>
            获取验证码
          </button>
        </div>
        <div className={style.formItem_code}>
          <input
            type="text"
            className={style.codeInp}
            placeholder="请输入验证码"
            name="code"
            value={code}
            onChange={(e) => {
              setCode(e.target.value);
            }}
            onKeyDown={(e) => onkeydown(e)}
          />
        </div>
      </form>
      <div className={style.shadow_one}></div>
      <div className={style.shadow_two}></div>
      <button
        type="button"
        className={style.btn_next}
        onClick={() => nextStep()}
      >
        下一步
      </button>
    </div>
  );
};

export default Index;
